import React, { Component } from 'react'
import { Card, Button, Input, Tag } from 'antd';
import "./Sort_Management.less"
import { IRouteComponentProps, useSelector, useDispatch } from 'umi';
import { useState, useEffect } from 'react';

const { CheckableTag } = Tag;

const Sort_Management: React.FC<IRouteComponentProps> = (props) => {
    // 标签
    let [selectedTags, SetselectedTags] = useState(['Books'])
    const handleChange = (tag: any, checked: any) => {
        const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
        console.log('You are interested in: ', nextSelectedTags);
        SetselectedTags(nextSelectedTags)
    }
    // 数据
    const state = useSelector((state: { articles_all: any }) => state.articles_all)
    const dispatch = useDispatch()
    console.log(state.articles_allList3.data, "state.articles_sort.data...");
    useEffect(() => {
        dispatch({
            type: "articles_all/sort"
        })
    }, []);
    return (
        <div className="site-card-border-less-wrapper">
            <Card className='left' title="添加标签" style={{ width: 400, height: 250, }}>
                <p> <Input type="text" placeholder='输入标签名称' /> </p>
                <p> <Input type="text" placeholder='输入标签值 (请输入英文，作为路由使用)' /> </p>
                <p> <Button>保存</Button> </p>
            </Card>
            <Card title="所有标签" style={{ width: 800, height: 100, }}>
                {state.articles_allList3.data && state.articles_allList3.data.map((tag: any) => (
                    <CheckableTag
                        key={tag}
                        checked={selectedTags.indexOf(tag) > -1}
                        onChange={checked => handleChange(tag, checked)}
                    >
                        {tag.label}
                    </CheckableTag>
                ))}
            </Card>
        </div>
    )
}

export default Sort_Management;










